import React, {useEffect, useState} from 'react';
import {View, Text, TouchableOpacity, Image, ScrollView} from 'react-native';
import {useNavigation} from '@react-navigation/native';
import AreaView from '../../components/Layout/AreaView';
import OrderPrdList from '../../components/OrderPrdList';
import styles from './style';
import {
  couponcustList,
  profile,
  updateOrder,
  orderCalculateAmt,
  alipayAppPay,
  wxpayAppPay,
  resetPay,
} from '../../service/home';
const status = {
  0: '待支付',
  1: '已支付 ',
  2: '已开票 ',
  3: '已取消 ',
};
const OrderDetail = (props) => {
  const navigation = useNavigation();
  const [courseData, setCourseData] = useState({});
  const {
    route: {
      params: {orderId},
    },
  } = props;
  useEffect(() => {
    navigation.addListener('focus', async () => {
      resetPay({orderId}).then((res) => {
        console.log(res);
        setCourseData(res.data);
      });
    });
  }, [navigation, orderId]);
  return (
    <AreaView>
      <ScrollView showsVerticalScrollIndicator={false} style={styles.scroll}>
        <View style={styles.head}>
          <View style={styles.head_btn}>
            <Text style={styles.btn_text}>
              {status[courseData?.orderStatus]}
            </Text>
          </View>
        </View>
        <View style={styles.order_detail}>
          <View style={styles.order_title}>
            <View style={styles.order_line} />
            <Text style={styles.order_title_text}>订单信息</Text>
          </View>
          {courseData?.smOrderCmCourseList?.map((item) => (
            <OrderPrdList key={item.cmCourseId} courseData={item} />
          ))}
          <View style={styles.order_container_list}>
            <View style={styles.content_info}>
              <View style={styles.info_list}>
                <Text style={styles.label}>订单编号:</Text>
                <Text style={styles.label_text}>{courseData?.orderNo}</Text>
              </View>
              <View style={styles.info_list}>
                <Text style={styles.label}>下单时间:</Text>
                <Text style={styles.label_text}>{courseData?.updateTime}</Text>
              </View>
              <View style={styles.info_list}>
                <Text style={styles.label}>支付方式:</Text>
                <Text style={styles.label_text}>
                  {courseData?.payChannels || '-'}
                </Text>
              </View>
              <View style={styles.info_list}>
                <Text style={styles.label}>支付时间:</Text>
                <Text style={styles.label_text}>{courseData?.updateTime}</Text>
              </View>
            </View>
          </View>
          <View style={styles.order_money_container}>
            <View style={styles.content_info}>
              <View style={styles.info_list}>
                <Text style={styles.label}>商品价格</Text>
                <Text style={styles.label_text}>
                  ￥{courseData?.totalPrice?.toFixed(2)}
                </Text>
              </View>
              <View style={styles.info_list}>
                <Text style={styles.label}>商品优惠</Text>
                <Text style={[styles.label_text, styles.lab_money]}>
                  使用优惠券-{courseData?.freePrice}元
                </Text>
              </View>
            </View>
          </View>
          <View style={styles.detail_btm}>
            <Text style={styles.btm_text}>实付:</Text>
            <Text style={styles.btn_money}>￥{courseData?.actualPrice}</Text>
          </View>
        </View>
        <View style={styles.gap} />
        <View style={styles.order_title}>
          <View style={styles.order_line} />
          <Text style={styles.order_title_text}>用户信息</Text>
        </View>
        <View style={styles.content}>
          <View style={styles.content_info}>
            <View style={styles.info_list}>
              <Text style={styles.label}>用户名:</Text>
              <Text style={styles.label_text}>{courseData?.custName}</Text>
            </View>
            <View style={styles.info_list}>
              <Text style={styles.label}>姓名:</Text>
              <Text style={styles.label_text}>{courseData?.nickName}</Text>
            </View>
            <View style={styles.info_list}>
              <Text style={styles.label}>手机号:</Text>
              <Text style={styles.label_text}>{courseData?.phone}</Text>
            </View>
            <View style={styles.info_list}>
              <Text style={styles.label}>地址:</Text>
              <Text style={styles.label_text}>{courseData?.createBy}</Text>
            </View>
          </View>
        </View>
      </ScrollView>
      {courseData?.orderStatus === '0' && (
        <View style={styles.detail_container_btm}>
          <TouchableOpacity
            style={styles.send_btn}
            onPress={() =>
              navigation.push('ResetPay', {
                orderId: courseData?.orderId,
              })
            }>
            <Text style={styles.send_btn_text}>去支付</Text>
          </TouchableOpacity>
        </View>
      )}
      {courseData?.orderStatus === '1' && (
        <View style={styles.detail_container_btm}>
          <TouchableOpacity
            style={styles.send_btn}
            onPress={(e) => {
              e.preventDefault();
              navigation.push('InvoiceDetail', {
                orderId: courseData.orderId,
              });
            }}>
            <Text style={[styles.send_btn_text, styles.gray]}>查看发票</Text>
          </TouchableOpacity>
          <TouchableOpacity
            style={styles.send_btn}
            onPress={(e) => {
              e.preventDefault();
              navigation.push('SaleAfter', {
                orderId: courseData.orderId,
              });
            }}>
            <Text style={[styles.send_btn_text, styles.gray]}>退换/售后</Text>
          </TouchableOpacity>
          {/* <TouchableOpacity
            style={styles.send_btn}
            onPress={() =>
              navigation.push('ResetPay', {
                orderId: courseData?.orderId,
              })
            }>
            <Text style={styles.send_btn_text}>再次购买</Text>
          </TouchableOpacity> */}
        </View>
      )}
      {courseData?.orderStatus === '3' && (
        <View style={styles.detail_container_btm}>
          <TouchableOpacity
            style={styles.send_btn}
            onPress={() =>
              navigation.push('ResetPay', {
                orderId: courseData?.orderId,
              })
            }>
            <Text style={styles.send_btn_text}>再次购买</Text>
          </TouchableOpacity>
        </View>
      )}
    </AreaView>
  );
};

export default OrderDetail;
